<template>
	<view class="content">
		<view class="infor-content">
			<view class="one-infor">
				<view>車型</view>
				<input type="text" v-model="car_model" placeholder="請輸入您的車型" placeholder-style="color:#CCCCCC">
			</view>
			<view class="one-infor">
				<view>車牌號</view>
				<input type="text" v-model="license_plate" placeholder="請輸入您的車牌號" placeholder-style="color:#CCCCCC">
			</view>
			<view class="one-infor">
				<view>車輛類型</view>
				<view class="pet-type">
					<view class="one-type" @click="changeCarType(1)">
						<view v-if="carType!=1" class="no-check"></view>
						<image v-if="carType==1" class="is-check" src="../../static/image/login/check.png" mode=""></image>
						<view class="name">出租車</view>
					</view>
					<view class="one-type" @click="changeCarType(2)">
						<view  v-if="carType!=2" class="no-check"></view>
						<image v-if="carType==2" class="is-check" src="../../static/image/login/check.png" mode=""></image>
						<view class="name">私家車</view>
					</view>
				</view>
			</view>
			<view class="one-infor" v-if="carType==1">
				<view>愛車類型</view>
				<view class="pet-type">
					<view class="one-type" @click="changeCarColor(1)">
						<view v-if="carColor!=1" class="no-check"></view>
						<image v-if="carColor==1" class="is-check" src="../../static/image/login/check.png" mode=""></image>
						<view class="name">紅的士</view>
					</view>
					<view class="one-type" @click="changeCarColor(2)">
						<view  v-if="carColor!=2" class="no-check"></view>
						<image v-if="carColor==2" class="is-check" src="../../static/image/login/check.png" mode=""></image>
						<view class="name">綠的士</view>
					</view>
				</view>
			</view>
			<view class="one-infor" v-if="carType==2">
				<view>愛車類型</view>
				<view class="pet-type">
					<view class="one-type" @click="changeCarColor(3)">
						<view v-if="carColor!=3" class="no-check"></view>
						<image v-if="carColor==3" class="is-check" src="../../static/image/login/check.png" mode=""></image>
						<view class="name">X</view>
					</view>
					<view class="one-type" @click="changeCarColor(4)">
						<view  v-if="carColor!=4" class="no-check"></view>
						<image v-if="carColor==4" class="is-check" src="../../static/image/login/check.png" mode=""></image>
						<view class="name">XL</view>
					</view>
				</view>
			</view>
			<view class="one-infor">
				<view>車輛顏色</view>
				<input type="text" v-model='color' placeholder="請輸入您的車輛顏色" placeholder-style="color:#CCCCCC">
			</view>
			<view class="one-infor">
				<view>車牌座位</view>
				<input type="num"  v-model='seat' placeholder="請輸入您的車輛座位數" placeholder-style="color:#CCCCCC">
			</view>
			<view class="one-infor">
				<view>能否接受攜帶寵物</view>
				<view class="pet-type">
					<view class="one-type" @click="changeColor(0)">
						<view v-if="canPet!=0" class="no-check"></view>
						<image v-if="canPet==0" class="is-check" src="../../static/image/login/check.png" mode=""></image>
						<view class="name">否</view>
					</view>
					<view class="one-type" @click="changeColor(1)">
						<view  v-if="canPet!=1" class="no-check"></view>
						<image v-if="canPet==1" class="is-check" src="../../static/image/login/check.png" mode=""></image>
						<view class="name">是</view>
					</view>
				</view>
			</view>
			<view class="one-upload" >
				<view class="title">駕駛證</view>
				<view class="upload">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" width="315" height="200">
						<view class="upload-content">
							<image src="../../static/image/index/add.png" mode=""></image>
							<text>上傳駕駛證主頁</text>
						</view>
					</u-upload>
					<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
						:maxCount="1" width="315" height="200">
						<view class="upload-content">
							<image src="../../static/image/index/add.png" mode=""></image>
							<text>上傳駕駛證副頁</text>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="one-upload" >
				<view class="title">行駛證</view>
				<view class="upload">
					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="1" width="315" height="200">
						<view class="upload-content">
							<image src="../../static/image/index/add.png" mode=""></image>
							<text>上傳行駛證主頁</text>
						</view>
					</u-upload>
					<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple
						:maxCount="1" width="315" height="200">
						<view class="upload-content">
							<image src="../../static/image/index/add.png" mode=""></image>
							<text>上传行駛證副頁</text>
						</view>
					</u-upload>
				</view>
			</view>
		</view>
		<view style="width:100%;height:160rpx;"></view>
		<view class="add-btn" @click="toUpLoad">提交</view>
	</view>
</template>

<script>
	import { addCar } from '../../request/api.js'
	export default {
		data() {
			return {
				canPet:0,
				carColor:1,
				carType:1,
				car_model:'',
				license_plate:'',
				fileList1:[],
				fileList2:[],
				fileList3:[],
				fileList4:[],
				color:'紅色',
				seat:4
			};
		},
		computed:{
			imgUrl(){
				return this.$store.state.user.imgUrl
			}
		},
		methods:{
			changeCarType(e){
				this.carType=e;
				if(e==1){
					this.seat=4;
				}else{
					this.seat='';
					this.color=''
				}
			},
			changeCarColor(e){
				this.carColor=e;
				if(e==1){
					this.color='紅色'
				}else if(e==2){
					this.color='綠色'
				}
			},
			changeType(e){
				this.canPet=e;
			},
			// 上傳信息
			async toUpLoad(){
				if (this.fileList1.length == 0) {
					uni.showToast({
						title: '請上傳駕駛證正面',
						icon: 'none'
					})
					return
				}
				if (this.fileList2.length == 0) {
					uni.showToast({
						title: '請上傳駕駛證反面',
						icon: 'none'
					})
					return
				}
				if (this.fileList3.length == 0) {
					uni.showToast({
						title: '請上傳行駛證正面',
						icon: 'none'
					})
					return
				}
				if (this.fileList4.length == 0) {
					uni.showToast({
						title: '請上傳行駛證反面',
						icon: 'none'
					})
					return
				}
				if (!this.car_model) {
					uni.showToast({
						title: '請填寫車型信息',
						icon: 'none'
					})
					return
				}
				if (!this.license_plate) {
					uni.showToast({
						title: '請填寫車牌號',
						icon: 'none'
					})
					return
				}
				if (!this.license_plate) {
					uni.showToast({
						title: '請填寫車牌號',
						icon: 'none'
					})
					return
				}
				if (!this.color) {
					uni.showToast({
						title: '請填寫車輛顏色',
						icon: 'none'
					})
					return
				}
				if (!this.seat) {
					uni.showToast({
						title: '請填寫車輛座位數',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title:'上傳中...'
				})
				let res=await addCar({
					driver_type:this.driver_type,
					type:this.carType,
					driving_licence_image1:this.fileList1[0].url,
					driving_licence_image2:this.fileList2[0].url,
					driving_permit_image1:this.fileList3[0].url,
					driving_permit_image2:this.fileList4[0].url,
					car_model:this.car_model,
					license_plate:this.license_plate,
					is_pet:this.canPet,
					color:this.color,
					seat:this.seat
				})
				uni.hideLoading()
				console.log(res);
				if(res.code==1){
					uni.showToast({
						title: '上傳成功',
						icon: 'none'
					})
					this.fileList1=[];
					this.fileList2=[];
					this.fileList3=[];
					this.fileList4=[];
					this.car_model='';
					this.license_plate='';
					this.canPet=0;
					this.carColor=1;
					this.carType=1;
					uni.navigateBack()
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			// 新增图片 这个是上传图像的方法
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				// 用于存储符合条件的图片
				let Images = [];
				// 遍历上传的每张图片
				for (let i = 0; i < lists.length; i++) {
					const item = lists[i];
					Images.push(item)
				}
				let fileListLen = this[`fileList${event.name}`].length
				Images.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < Images.length; i++) {
					const result = await this.uploadFilePromise(Images[i].url)
					// 返回给后端服务器的 结果需要赋值给 this.infoForm.image = result
					console.log(result, '上传图像result');
					// this.infoForm.avatar = result
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: result.status,
						message: result.status == 'failed' ? '上传失败' : '',
						url:result.url
					}))
					fileListLen++
				}
				console.log(this.fileList1);
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.imgUrl + '/driver/common/upload', //后端接口地址
						filePath: url,
						name: 'file', //传给后端参数
						header: {
							'token': uni.getStorageSync('token')
						},
						formData: {
							path: 'avatar/user'
						},
						success: (res) => {
							console.log(res);
							if (res.statusCode == 200) {
								resolve({
									url: JSON.parse(res.data).data.url,
									status: 'success'
								})
							} else {
								resolve({
									url: url,
									status: 'failed'
								})
							}
						}
					});
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#FAFAFA;
		.content{
			width:702rpx;margin-left:auto;margin-right:auto;
			padding-top:24rpx;
			.infor-content{
				background-color:#ffffff;border-radius: 15rpx;
				box-shadow: 0 2rpx 12rpx 0 rgba(204,204,204,0.3);
				padding:0 24rpx;box-sizing: border-box;padding-bottom:24rpx;
				.one-infor{
					height:90rpx;border-bottom:1px solid #F0F0F0;
					display: flex;align-items: center;justify-content: space-between;
					font-size:30rpx;color:#040404;
					input{
						text-align: right;font-size:30rpx;
					}
					.pet-type{
						display: flex;align-items: center;justify-content: flex-end;
						.one-type{
							display: flex;align-items: center;margin-left:48rpx;
							font-size:26rpx;color:#040404;line-height:37rpx;
							.no-check{
								width:30rpx;height:30rpx;box-sizing: border-box;
								border:2rpx solid #CCCCCC;margin-right:10rpx;border-radius: 50%;
							}
							.is-check{
								width:30rpx;height:30rpx;margin-right:10rpx;
							}
						}
					}
				}
				.one-upload{
					margin-top:24rpx;
					.title{
						font-size:30rpx;color:#040404;line-height:42rpx;
					}
					.upload{
						display: flex;justify-content: space-between;
						margin-top:24rpx;
						.upload-content{
							width:315rpx;height:200rpx;
							background-color: #F6F6F6;
							border-radius: 15rpx;
							display: flex;align-items: center;
							justify-content: center;flex-direction: column;
							image{
								width:50rpx;height:50rpx;
							}
							text{
								margin-top:10rpx;font-size:20rpx;
								color:#9E9E9E;line-height:28rpx;
							}
						}
					}
				}
			}
			.add-btn{
				width:650rpx;height:98rpx;background-color:#040404;
				display: flex;align-items: center;justify-content: center;
				border-radius: 98rpx;font-size:36rpx;color:#Ffffff;
				position: fixed;bottom:30rpx;left:50rpx;
			}
		}
	}
</style>
